import { component$, useSignal, $, useStylesScoped$ } from "@builder.io/qwik";
import { qwikify$ } from "@builder.io/qwik-react";
import { Input, Button, Tag } from "antd";
import "antd/dist/antd.css"; // 引入 Ant Design 的样式
import styles from "./index.css?inline";

// 使用 qwikify$ 包装 Ant Design 组件
const AntInput = qwikify$(Input, { eagerness: "hover" });
const AntButton = qwikify$(Button, { eagerness: "hover" });
const AntTag = qwikify$(Tag, { eagerness: "load" });

export default component$(() => {
  useStylesScoped$(styles);
  const newTask = useSignal("");
  const tasks = useSignal<string[]>(['任务1']);

  const addTask = $(() => {
    if (newTask.value.trim()) {
      tasks.value = [...tasks.value, newTask.value];
      newTask.value = "";
    }
  });

  const removeTask = $((index: number) => {
    tasks.value = tasks.value.filter((_, i) => i !== index);
  });

  return (
    <div style={{ padding: "20px", maxWidth: "400px", margin: "0 auto" }}>
      <h2>待办事项</h2>
      <div style={{ display: "flex", marginBottom: "10px" }}>
        <input
          value={newTask.value}
          onChange$={(e) => (newTask.value = (e.target as any).value)}
          placeholder="输入新任务"
          style={{ marginRight: "10px" }}
        />
        <AntButton type="primary" onClick$={addTask}>
          添加
        </AntButton>
      </div>
      {tasks.value.map((item, idx) => {
        return (
          <div class="flex list" key={idx + '_' + Math.random()}>
            <div class="flex left-div">
              <AntTag color="magenta">{idx + 1}</AntTag>
              <div class="task">{item}</div>
            </div>
            <AntButton
              type="danger"
              size="small"
              onClick$={() => removeTask(idx)}
            >
              删除
            </AntButton>
          </div>
        );
      })}
    </div>
  );
});
